<template>
  <div class="order">
    <div v-for="(item,index) in list" :key="index" class="act_item">
      <h1>{{ item.title }}</h1>
      <img :src="item.pic" alt />
      <div class="act_info">
        <h2>
          <span>{{ item.count }}</span>个视频
        </h2>
        <div class="time">倒计时：{{ item.djs }}</div>
        <div class="clear"></div>
      </div>
    </div>

    <van-submit-bar class="abound-submit-bar" button-text="立即支付" @submit="onSubmit" />
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Circle,
  Icon,
  Cell,
  CellGroup,
  Card,
  Button,
  Panel,
  NoticeBar,
  SubmitBar
} from 'vant'
import { formatRestTime } from '../../common/util'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Circle.name]: Circle,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar,
    [SubmitBar.name]: SubmitBar
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    var ssss = [
      {
        title: '小心愿，大梦想',
        pic: '../../assets/img/new/act1.jpg',
        count: '34',
        time: '1525293470350'
      },
      {
        title: '杭州国际时装周童模招募',
        pic: '../../assets/img/new/act2.jpg',
        count: '36',
        time: '1575293470350'
      },
      {
        title: '怪兽bobo全线代言火爆杭城的联名秀招募童模啦！',
        pic: '../../assets/img/new/act3.jpg',
        count: '74',
        time: '1579253270350'
      },
      {
        title: '汉风唐韵 、别',
        pic: '../../assets/img/new/act2.jpg',
        count: '266',
        time: '1575753270350'
      },
      {
        title: '听说你们想和明星超模同台“PK”？',
        pic: '../../assets/img/new/act1.jpg',
        count: '97',
        time: '1575253270450'
      }
    ]
    ssss.map((obj, index) => {
      this.$set(obj, 'djs', formatRestTime(obj.time))
    })
    this.list = ssss
  },
  mounted () {
    setInterval(() => {
      for (var key in this.list) {
        var aaa = this.list[key]['time']
        this.list[key]['djs'] = formatRestTime(aaa)
      }
    }, 1000)
  },
  methods: {
    onSubmit () {
      this.axios
        .get('/site/index')
        .then(response => {
          this.msg = response.data.msg
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.order-panel /deep/ .van-panel__header {
  font-size: 0.2rem;
}
.order-panel /deep/ .van-cell__title {
  flex: 2;
  -webkit-box-flex: 2;
  text-transform: uppercase;
}
.order-panel /deep/ .van-panel__footer {
  font-size: 0.2rem;
}
.order-panel /deep/ .van-panel__footer a {
  color: #42b983;
}
.order-amount {
  text-align: left;
  padding-left: 0.3rem;
  font-size: 0.24rem;
}
.order-amount .price {
  color: #ff6600;
  font-size: 0.4rem;
}
.order-amount small {
  padding-left: 0.1rem;
  font-size: 85%;
  color: #aaa;
}
</style>
